import React, { Component } from 'react';
import {
  Modal,
  Form,
  Upload,
  Icon,
  Input,
  Select,
  Checkbox,
  Button,
  Progress,
  message,
} from 'antd';
import { connect } from 'dva';
import styles from './UploadVideo.less';
import SelectedImage from '@/components/plugins/selectImage/index';

@connect(({ global, videoList }) => ({
  oemInfo: global.oemInfo,
  videoList,
}))
class UploadVideo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: true,
      videoUrl: '',
      imageUrl: '',
      Agreed: true,
      submitButton: true,
      fileSize: 0,
      fileName: '',
      OssName: '',
      Title: '',
      VideoImage: '',
      videoGroupId: 0,
      showUpload: true,
      btnLoading: false,
      visibleAgreement: false,
    };
  }

  componentDidMount() {
    this.getVideoGroup();

    let { videoGroupId } = this.props;
    if (videoGroupId == -1) {
      videoGroupId = 0
    }
    this.setState({
      videoGroupId: videoGroupId
    });

    if (JSON.stringify(this.props.videoObj) == '{}') {
      this.setState({
        showUpload: true,
      });
    } else {
      // console.log('this.props.videoObj', this.props.videoObj)
      this.setState({
        showUpload: false,
        submitButton: false,
        Title: this.props.videoObj['DisplayName'],
        videoGroupId: this.props.videoObj['CategoryId'],
        imageUrl: this.props.videoObj['Img'],
      });
    }

  }


  // 显示模态框
  showModal = () => {
    this.setState({
      visible: true,
    });
  };
  // 获取视频分组
  getVideoGroup() {
    const { dispatch } = this.props;
    dispatch({
      type: 'videoList/GetVideoGroup',
    });
  }
  // 确定
  handleOk = e => {
    // 本地上传
    if (this.state.showUpload) {
      if (this.state.Agreed) {
        if (this.state.Title && this.state.Title.replace(/^\s+|\s+$/g, '')) {
          if (this.state.Title.length > 20) {
            message.error('请输入不超过20个字的视频名称');
            return false;
          } else {
            this.setState({
              btnLoading: true
            });
            const { dispatch } = this.props;
            dispatch({
              type: 'videoList/SaveVideo',
              payload: {
                FileSize: this.state.fileSize,
                FileName: this.state.fileName,
                OssName: this.state.OssName,
                VideoName: this.state.fileName,
                VideoImage: this.state.imageUrl,
                CategoryId: this.state.videoGroupId,
              },
            });

            let item = {};
            item.DisplayName = this.state.Title;
            item.Img = '';
            item.Path = this.props.videoList.videoUpload.result.name;

            this.setState({
              btnLoading: false
            });
            message.success('上传视频成功');
            this.handleCancel();
          }
        } else {
          message.error('名称不能为空!');
          return;
        }
      } else {
        message.error('请认真阅读并同意视频上传服务协议');
        return;
      }
    } else {
      if (this.state.Title.length > 20) {
        message.error('请输入不超过20个字的视频名称');
        return false;
      }
      this.setState({
        btnLoading: true
      });
      const { dispatch } = this.props;
      dispatch({
        type: 'videoList/EditVideo',
        payload: {
          VideoId: this.props.videoObj['Id'],
          DisplayName: this.state.Title,
          CategoryId: this.state.videoGroupId,
          VideoImg: this.state.imageUrl,
        },
        callBack: {
          success: res => {
            if (res.Code === 0) {
              this.setState({
                btnLoading: false
              });
              message.success('修改成功');
              this.handleCancel();
            }
          },
          error: res => {
            message.error(res.Msg);
          },
        },
      });
    }
  };
  // 关闭弹窗
  handleCancel = e => {
    this.setState(
      {
        visible: false,
      },
      () => {
        this.props.onIsLoading();
      }
    );
  };
  // 视频名称
  onChangeTitle = e => {
    this.setState({
      Title: e.target.value,
      fileName: e.target.value
    });
  };
  // 上传视频
  handleUploadVideo = ({ file }) => {
    let isVideo = false;
    if (file.type === 'video/mp4' || file.type === 'video/mpeg4' || file.type === 'video/avi' || file.type === 'video/x-ms-wmv' || file.type === 'video/quicktime' || file.type === 'video/x-matroska' || file.type === "" || file.type === 'video/3gpp') {
      isVideo = true;
    } else {
      isVideo = false;
    }

    if (!isVideo) {
      message.error('请上传支持的视频类型文件!');
      return false;
    }
    const isLt50M = file.size / 1024 / 1024 < 50;
    if (!isLt50M) {
      message.error('文件必须小于50MB!');
      return false;
    }

    this.setState({
      fileName: file.name,
      Title: file.name,
      fileSize: file.size,
    }, () => {
      if (this.state.fileName.length > 0 && this.state.fileSize > 0) {
        // 进度条
        this.setState({ uploadVideoLoading: true });
        this.uploadVideo(this.state.fileName, this.state.fileSize, file);
      }
    });
  };
  // 上传视频文件
  uploadVideo(name, size, file) {
    const { dispatch } = this.props;

    dispatch({
      type: 'videoList/GetVideoStsConfig',
      payload: {
        filename: this.state.Title,
        filesize: size,
        file: file,
      },
      callBack: {
        success: res => {
          let { OssFileName } = this.props.videoList.videoUpload['ossConfig'];
          if (res.Code === 0) {
            message.success('上传成功', 2);
            this.setState({
              Title: file.name,
              OssName: OssFileName,
              submitButton: false
            });

          }
        },
        error: res => {
          message.error(res.Msg);
        },
      },
    });
  }
  // 切换分组
  handleChange = value => {
    this.setState({
      videoGroupId: value,
    });
  };
  // 图片插件
  imgModal = ref => {
    this.imgmodal = ref;
  };
  OpenImageModal = () => {
    this.imgmodal.handleShowModal();
    // this.setState({
    //   selectImgvisible:true
    // })
  };
  onImageChange = res => {
    this.setState({
      imageUrl: res.imageUrl.substr(res.imageUrl.indexOf('.com/') + 5),
    });
    this.imgmodal.handleModalVisible();
  };

  // 协议复选框
  onCheckBox = (e) => {
    this.setState({
      Agreed: e.target.checked,
    });
  }

  // 协议
  openAgreement = () => {
    this.setState({
      visibleAgreement: true
    });
  }
  // 关闭协议
  handleAgreement = () => {
    this.setState({
      visibleAgreement: false
    });
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 21 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 21,
          offset: 3,
        },
      },
    };

    const uploadButton = (
      <div>
        <Icon type={this.state.uploadLoading ? 'loading' : 'plus'} />
      </div>
    );
    const uploadVideoButton = (
      <div>
        <Icon type={this.state.uploadVideoLoading ? 'loading' : 'plus'} />
      </div>
    );

    return (
      <div className={styles.divBox}>
        <Modal
          title={this.state.showUpload ? '上传视频' : '编辑视频'}
          visible={this.state.visible}
          onCancel={this.handleCancel}
          className={styles.modalBox}
          maskClosable={false}
          destroyOnClose
          centered={true}
          footer={[
            <Button key="cancel" onClick={this.handleCancel}>
              取消
            </Button>,
            <Button
              key="ok"
              type={this.state.submitButton ? 'default' : 'primary'}
              disabled={this.state.submitButton ? true : false}
              onClick={this.handleOk.bind(this)}
              loading={this.state.btnLoading}
            >
              确定
            </Button>,
          ]}
        >
          <Form>
            {this.state.showUpload ? (
              <div>
                {this.state.uploadVideoLoading ? (
                  <Form.Item>
                    <Progress
                      percent={this.props.videoList.progress}
                      style={{ width: this.props.videoList.progress + '% !important' }}
                      status="normal"
                      className={styles.percentBox}
                    />

                    <div className={styles.progressSpan}>
                      <span>{this.state.fileName}</span>
                    </div>
                  </Form.Item>
                ) : (
                    <Form.Item {...formItemLayout} label="本地视频">
                      <Upload
                        // action="//jsonplaceholder.typicode.com/posts/"
                        listType="picture-card"
                        name="File"
                        accept=""
                        className="avatar-uploader"
                        showUploadList={false}
                        // beforeUpload={this.beforeUploadVideo}
                        beforeUpload={() => {
                          return false;
                        }}
                        onChange={this.handleUploadVideo}
                        style={{ width: '96px', height: '54px' }}
                      >
                        {this.state.videoUrl ? (
                          <video src={this.state.videoUrl} width="96" height="54" alt="" />
                        ) : (
                            uploadVideoButton
                          )}
                      </Upload>

                      <p style={{ fontSize: 14, color: '#8C8C8C', lineHeight: '21px' }}>
                        点击添加视频，视频大小不超过50m，建议时长30s内。支持的视频类型包括mp4,avi,wmv,mpeg,mov,mkv,flv,3gp,vob
                    </p>
                    </Form.Item>
                  )}
              </div>
            ) : null}

            <Form.Item {...formItemLayout} label="名称">
              {getFieldDecorator('Title', {
                rules: [
                  {
                    required: true,
                    message: '请输入视频名称',
                    max: 20,
                    message: '请输入不超过20个字符的视频名称',
                  },
                ],
                initialValue: this.state.Title,
              })(
                <Input
                  name="Title"
                  style={{ width: 224 }}
                  max={10}
                  placeholder="请输入视频名称"
                  onChange={this.onChangeTitle}
                />
              )}
            </Form.Item>

            <Form.Item {...formItemLayout} label="分组">
              <Select
                style={{ width: 224 }}
                placeholder="请选择视频分组"
                dropdownStyle={{ zIndex: 9999 }}
                onChange={this.handleChange}
                value={this.state.videoGroupId}
              >
                {this.props.videoList.videoGroup &&
                  this.props.videoList.videoGroup.map((item, index) => {
                    if (index != 0) {
                      return (
                        <Select.Option key={index} value={item.Id}>
                          {item.DisplayName}
                        </Select.Option>
                      );
                    }
                  })}
              </Select>
            </Form.Item>

            <Form.Item {...formItemLayout} label="封面" className={styles.coverBox}>
              <div className={styles.uploadCover} onClick={this.OpenImageModal}>
                {this.state.imageUrl ? (
                  <img
                    src={
                      this.props.oemInfo && this.props.oemInfo['cdnUrl'] + '/' + this.state.imageUrl + '?x-oss-process=style/240'
                    }
                    style={{ width: '100%', height: '100%' }}
                  />
                ) : (
                    <Icon type="plus" />
                  )}
              </div>

              <p style={{ fontSize: 14, color: '#8C8C8C', lineHeight: '21px' }}>
                建议尺寸：800 x 800
                像素，支持jpg、gif、png三种格式，大小不超过3MB。如果不添加封面，系统会默认截取视频的第一个画面作为封面
              </p>
            </Form.Item>

            <Form.Item {...tailFormItemLayout}>
              <Checkbox
                style={{ color: '#595959' }}
                checked={this.state.Agreed}
                onChange={this.onCheckBox}
              >
                同意
                <a href="javascript:;" style={{ color: '#2E74FF' }} onClick={this.openAgreement}>
                  《视频上传服务协议》
                </a>
              </Checkbox>
            </Form.Item>
          </Form>

          <SelectedImage onRef={this.imgModal} selectImage={this.onImageChange} imageList={this.props.imageList}/>
        </Modal>


        <Modal
          title="《音/视频上传规则》"
          visible={this.state.visibleAgreement}
          onCancel={this.handleAgreement}
          footer={null}
          className={styles.agreementBox}
        >
          <p>为保障您的权益，维护海商新云平台的正常秩序。您在海商新云平台制作、发布和传播视频、录像等信息时严格遵守本规则，在使用本服务之前您应仔细阅读并确认如下内容：</p>
          <p>1、您应保证您录制或使用新云服务上传、传播的内容不违反法律法规的规定，不包含暴力、色情、反动等一切违法或不良因素，同时不侵犯任何第三人的任何合法权利。</p>
          <p>2、您应保证您对录制/上传/传播的作品享有合法权利，您对您的录制、上传、传播行为独立承担法律责任，如您提供的作品导致海商或其关联公司遭受有关作品内容或其他合法权益的争议或者索赔，或受到相关政府部门的任何形式的处罚或承担任何形式的责任，您应承担由此产生的全部法律责任并使海商及其关联公司免责。</p>
          <p>3、您同意授予海商对上传作品和内容在全球范围内的免费、不可撤销的、无限期的、并且可转让的非独家使用权许可，海商有权传播、展示及推广上述作品和内容。</p>
          <p>4、海商不保证您所有上传内容能够通过海商新云服务为其他用户所获取、浏览，也没有对所有您上传、传播的节目进行监测的义务，但海商保留根据国家法律、法规的要求对您上传、传播的内容进行不定时抽查的权利，并有权在不事先通知的情况下移除违法、侵权的作品。此条的规定并不排除您对上传内容的合法性担保（包含但不限于版权合法），亦非表明海商有责任及能力判断您上传作品的版权归属。由此产生的法律责任应由您独自承担。</p>
          <p>5、海商如认为您上传/传播的内容不适当，有权进行删除或修改，有权按照海商规则对您进行处罚。</p>
        </Modal>
      </div>
    );
  }
}

export default Form.create()(UploadVideo);
